<!-- 拼单item -->
<template>
	<view class="row">
		<view class="left">
			<view class="box">
				<view class="imgBox" v-for="(item,index) in row.spellMembers" :key="index" v-if='row.spellMembers'>
					<avatar class="avatar" :src="item" v-if='isAll&&index==0'></avatar>
					<avatar class="avatar" :src="item" v-if='isMy'></avatar>
					<view v-if="index==0" class="master">拼主</view>
				</view>
				<block v-if="isMy">
					<view class="imgBox" v-for="cell in row.surplus" :key="cell">
						<image class="avatar" src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/vip/img9.png" mode=""></image>
					</view>
				</block>
			</view>
			<view class="name" v-if="!isMy">{{row.nickName}}</view>
		</view>
		<view class="right">
			<view class="times">
				<view>还差<text class="color1">{{row.surplus}}人</text>拼成</view>
				<view>剩余<text class="color2">{{row.times}}</text></view>
			</view>
			<view class="go" v-if="isMy" @click="$emit('join',row)">额外奖励</view>
			<view class="go" v-else @click="$emit('join',row)">去拼单</view>
		</view>
	</view>
</template>

<script>
	import avatar from '@/components/avatar.vue'
	export default {
		components: {
			avatar
		},
		props: {
			row: {
				type: Object
			},
			//我的拼单
			isMy: {
				type: Boolean,
				default: false
			},
			//所有拼单
			isAll: {
				type: Boolean,
				default: false
			}
		},
		methods: {},
	}
</script>

<style lang='scss' scoped>
	
	/* .row:not(.row:last-of-type) {
		border-bottom: 2rpx solid #E9E9E9;
	} */
	

	.row:last-of-type {
		border-bottom: 2rpx solid #E9E9E9;
	}

	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 34rpx 28rpx 36rpx 32rpx;

		.left {
			display: flex;
			align-items: center;

			.box {
				position: relative;
				display: flex;
				width: 78rpx;
				height: 78rpx;
				margin-right: 18rpx;

				.imgBox {
					position: relative;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					margin-right: 20rpx;

					.avatar {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						overflow: hidden;
					}

					.master {
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translate(-50%, 50%);
						width: 61rpx;
						height: 24rpx;
						line-height: 24rpx;
						text-align: center;
						font-size: 22rpx;
						background: #FF8431;
						color: #fff;
						border-radius: 10rpx;
					}
				}
			}

			.name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #373737;
				width: 200rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.right {
			display: flex;
			align-items: center;

			.times {
				font-size: 26rpx;
				font-weight: 400;
				color: #292828;

				.color1 {
					color: rgb(255, 137, 11);
				}

				.color2 {
					color: #FC4843;
				}
			}

			.go {
				width: 146rpx;
				height: 68rpx;
				background: #194FC9;
				border-radius: 34rpx;
				text-align: center;
				line-height: 68rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin-left: 24rpx;
			}
		}
	}
</style>
